<template>
    <div class="cart_item">
        <div class="cart_column column_1">
            <el-checkbox class="my_el_checkbox" v-model="course.selected" @click="change"></el-checkbox>
        </div>
        <div class="cart_column column_2">
            <img src="/static/image/python.jpg" alt="">
            <span><router-link to="/course/detail/">{{course.name}}</router-link></span>
        </div>
        <div class="cart_column column_3">
            <el-select v-model="course.expire_id" size="mini" placeholder="请选择购买有效期" class="my_el_select">
                <el-option :label="item.expire_text" :value="item.id" :key="item.id" v-for="item in course.expire_list"></el-option>

            </el-select>
        </div>
        <div class="cart_column column_4">¥{{course.real_price}}</div>
        <div class="cart_column column_4" @click="cart_delete">删除</div>
<!--        <div class="cart_column column_4" >删除</div>-->
    </div>
</template>

<script>
    export default {
        name: "CartItem",
        //接受父组件传递的参数
        props:['course'],



        watch:{  //检测函数
            //通过检测selected的变化,来改变当前的选中状态
            "course.selected":function () {
                //向后台发送请求,切换状态
                    this.change_select()
            },
            // 切换课程有效期
            'course.expire_id': function () {
                // 后台发送请求切换状态
                this.change_expire()
            }
        },
        methods:{
            //点击选择框时,向状态机提交一个变化,在页面刷新前要先提交一次状态
            change(){
                this.$store.commit("change_order")
            },

            // 删除购物车商品函数
            cart_delete(){
                //查看是否有登录状态,虽然有点多此一举
                let token =localStorage.user_token ||sessionStorage.user_token;
                //地址先暂定,可能要变
                this.$axios.patch(`http://127.0.0.1:9000/cart/delete/`,{
                    selected:this.course.selected, //勾选状态
                    course_id:this.course.id,      //商品id
                },{
                    //提交token必须在请求头声明token
                    "Authorization": "jwt "+token,   //此处的jwt后面必须有个空格,这是格式要求,必须的
                }).then(res=>{
                    console.log("商品删除成功");
                    console.log(res.data);
                    this.$message.success(res.data.message);
                    //删除成功之后自动刷新页面,此方式跳转不了
                    // this.$router.push('/cart')
                    this.$router.push('/mypage')   //此处采用的是:跳转至一个新的空白页,然后再跳转回来
                    /*
                    * 上面两种方式分析:首先go(0)的写法是无效的,
                    *   使用push跳转当前页面,明显也是失败的,需要手动解决
                    *   使用push跳转到一个新的页面,然后再快速跳回来,效果可以,但是在确认的时候也要跳转,体验不好(虽然速度也可以,只是地址栏快速变换了一下)
                    *   最高级的provide / inject组合(体验极佳) 不会用
                    * */
                }).catch(error=>{
                    console.log("商品删除失败");
                    console.log(error.response);
                    this.$message.error(error.response)
                })
            },

            // 改变redis中的课程有效期
            change_expire(){
                let token = sessionStorage.user_token || localStorage.user_token;
                this.$axios.put(`http://127.0.0.1:9000/cart/option/`,{
                    expire_id: this.course.expire_id,
                    course_id: this.course.id,
                },{
                    // headers:{
                        "Authorization": "jwt " + token,
                    // }
                }).then(response=>{
                    console.log(response.data);

                    // 更新切换有效期后的课程的价格
                    this.course.real_price = response.data.real_price;
                    // TODO 临时添加
                    // this.course.expire_text=response.data.expire_text;

                    this.$message.success("切换有效期成功");
                    //
                    this.$emit("change_select")
                }).catch(error=>{
                    console.log(error);
                })
            },

            //状态切换函数
            change_select(){
                let token =localStorage.user_token ||sessionStorage.user_token;
                this.$axios.patch(`http://127.0.0.1:9000/cart/option/`,{
                    selected:this.course.selected,
                    course_id:this.course.id,
                },{
                    //提交token必须在请求头声明token
                    "Authorization": "jwt "+token,   //此处的jwt后面必须有个空格,这是格式要求,必须的
                }).then(res=>{
                    console.log(res.data);
                    this.$message.success(res.data.message);
                    this.$emit("change_select")
                }).catch(error=>{
                    console.log(error.response);
                    this.$message.error(error.response)
                })
            }
        },
        data(){
            return{
                expire:"六个月有效期"
            }
        },
        // store:myStore,
    }

</script>

<style scoped>
    .cart_item::after {
        content: "";
        display: block;
        clear: both;
    }

    .cart_column {
        float: left;
        height: 250px;
    }

    .cart_item .column_1 {
        width: 88px;
        position: relative;
    }

    .my_el_checkbox {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 16px;
        height: 16px;
    }

    .cart_item .column_2 {
        padding: 67px 10px;
        width: 520px;
        height: 116px;
    }

    .cart_item .column_2 img {
        width: 175px;
        height: 115px;
        margin-right: 35px;
        vertical-align: middle;
    }

    .cart_item .column_3 {
        width: 197px;
        position: relative;
        padding-left: 10px;
    }

    .my_el_select {
        width: 117px;
        height: 28px;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .cart_item .column_4 {
        padding: 67px 10px;
        height: 116px;
        width: 142px;
        line-height: 116px;
    }
</style>
